<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div class="dargtabel">
        <div class="dargtabel_title">拖动排序</div>
        <div class="dargtabel_con">
            <Card>
                <V-dragtabel
                    :box-width="231"
                    :box-height="200"
                    :col-num="5"
                    :datas="colors"
                >
                    <template #content="{ item }">
                        <div class="box" :style="{ background: `${item.color}` }">
                            <div>{{ item.text[0] }}</div>
                            <div>{{ item.text[1] }}</div>
                        </div>
                    </template>
                </V-dragtabel>
            </Card>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import VDragtabel from '@/components/dragtabel/index.vue'
import { Card } from 'ant-design-vue'

export default defineComponent({
    name: 'Varify',
    components: {
        VDragtabel,
        Card,
    },
    setup() {
        let colors = [
            {
                id: '1',
                color: 'linear-gradient(45deg,#7B829F,#FED88D)',
                text: ['Waterloo-#7B829F', 'Salomie-#FED88D'],
            },
            {
                id: '2',
                color: 'linear-gradient(45deg,#485296,#CBB4C6)',
                text: ['Victoria-#485296', 'Lily-#CBB4C6'],
            },
            {
                id: '3',
                color: 'linear-gradient(45deg,#86E3CE,#CCADBD)',
                text: ['Riptide-#86E3CE', 'Light Wisteria-#CCADBD'],
            },
            {
                id: '4',
                color: 'linear-gradient(45deg,#46C970,#B8BFD6)',
                text: ['Indigo-#46C970', 'Blue Haze-#B8BFD6'],
            },
            {
                id: '5',
                color: 'linear-gradient(45deg,#79CEED,#C5E7F1)',
                text: ['Sky Blue-#79CEED', 'Link Water-#C5E7F1'],
            },
            {
                id: '6',
                color: 'linear-gradient(45deg,#B4AE85,#D2D0F5)',
                text: ['Boupuet-#B4AE85', 'Moon Raker-#D2D0F5'],
            },
            {
                id: '7',
                color: 'linear-gradient(45deg,#86E3CE,#D0E6A5)',
                text: ['Riptid-#86E3CE', 'Caper-#D0E6A5'],
            },
            {
                id: '8',
                color: 'linear-gradient(to bottom,#D5EAF5,#F5DDDA)',
                text: ['Link Water-#D5EAF5', 'Vanilla Ice-#F5DDDA'],
            },
            {
                id: '9',
                color: 'linear-gradient(to bottom,#97CADB,#D6E8EE)',
                text: ['Morning Glory-#97CADB', 'Botticelli-#D6E8EE'],
            },
            {
                id: '9',
                color: 'linear-gradient(to bottom,#b4859f,#424244)',
                text: ['God-#b4859f', 'God-#424244'],
            },
        ]
        return {
            colors,
        }
    },
})
</script>

<style lang="less" scoped>
.dargtabel_title {
  font-size: 20px;
  font-weight: 100;
  color: #666;
  font-size: "Century Gothic", "TeXGyreAdventor", "STHeiti", sans-serif;
  padding: 20px 0;
  text-align: center;
}
.box {
  width: 100%;
  height: 200px;
  overflow: hidden;
  div {
    text-align: center;
    margin: 0;
    font-size: "Century Gothic", "TeXGyreAdventor", "STHeiti", sans-serif;
  }
}
</style>
